import React, { Component, Suspense, lazy } from 'react'
import { Switch, Route } from 'react-router-dom'
// import Home from '@/views/Home'

// 懒加载的组件，则一定要配合Suspense组件一起使用
// webpackChunkName自定义拆分后的模块名称 xx.chunk.js
// webpack4的时候建议自定义名称，webpack它的拆分模块名称默认用的是索引 0-999
// webpack5它是使用目录路径名称来生成的拆分模块名，所以不用自定义了
// const Home = lazy(() => import(/*webpackChunkName:'aaaaa'*/ '@/views/Home'))
import Layout from '@/views/Layout'
const Detail = lazy(() => import('@/views/Detail'))

class App extends Component {
  render() {
    return (
      <>
        <Suspense fallback={<div>loading...</div>}>
          <Switch>
            <Route path="/detail/:id" component={Detail} />
            <Route path="/" component={Layout} />
          </Switch>
        </Suspense>
      </>
    )
  }
}

export default App
